<template>
  <ul id="chat-list" class="immain-dialog mt-97 px-30 pb-150">
    <li class="im-time color-999 text-center f24 py-30" v-if="canLoadMore">
      ---- 上拉加载更多 ----
    </li>
    <li class="im-time color-999 text-center f24 py-30" v-else>
      ---- 已无更多记录 ----
    </li>
    <chat-item
      v-for="(msg,index) in msglist"
      :type="type"
      :rawMsg="msg"
      :isRobot="isRobot"
      :userInfos="userInfos"
      :robotInfos="robotInfos"
      :myInfo="myInfo"
      :key="msg.idClient"
      @msg-loaded="msgLoaded"
      :id="index"
    ></chat-item>
  </ul>
</template>
<script type="text/javascript">
  import util from 'js/utils'
  import config from '../config'
  import emojiObj from '../config/emoji'
  import ChatItem from './ChatItem'

  export default {
    components: {
      ChatItem
    },
    props: {
      type: String, // 类型，chatroom, session
      canLoadMore: [String, Boolean],
      isRobot: {
        type: Boolean,
        default () {
          return false
        }
      },
      msglist: {
        type: Array,
        default () {
          return []
        }
      },
      userInfos: {
        type: Object,
        default () {
          return {}
        }
      },
      myInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      robotInfos: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        isFullImgShow: false,
        msgLoadedTimer: null
      }
    },
    methods: {
      showFullImg (src) {
        this.$store.dispatch('showFullscreenImg', {
          src
        })
      },
      msgLoaded () {
       /* clearTimeout(this.msgLoadedTimer)
        this.msgLoadedTimer = setTimeout(() => {
          this.$emit('msgs-loaded')
        }, 20)*/
      }
    }
  }
</script>

<style type="text/css">
  .p-chat-list {
    .u-icon {
      width: 1.4rem;
      height: 1.6rem;
      margin-right: 0.2rem;
      vertical-align: bottom;
    }
  }
</style>
